<template>
  <div class="all">
    <!-- 标题栏 -->
    <div class="title">
      <div class="titleName">
        <div class="titlename1" @click="toPromote">推荐</div>
        <div class="titlename3" style="color:#00ffff">关注</div>
        <div class="titlename2" @click="my">我的</div>
      </div>
    </div>
    <div class="box_promotionlist">
      <div v-show="accountDatas.length === 0" style="color:#fff;font-size:20px">
        无账号登录
      </div>
      <!-- 调试的时候方便使用 -->
      <el-button @click="flash1">刷新</el-button>
      <div
        class="card"
        v-for="(item, id) in accountDatas"
        :key="id"
        @click="toDetails(id)"
        v-show="item.account_name === '系统仿真账户'"
      >
        <div class="LeftBox">
          <div class="mess1">
            <div class="mess2">账号</div>
            <div class="mess3">{{ item.account }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">状态</div>
            <div class="mess3" style="color:red">{{ item.status }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">资产总值</div>
            <div class="mess3">{{ towNumber(item.total_asset) }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">证券市值</div>
            <div class="mess3">
              {{ towNumber(item.stock_value) }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">可用资金</div>
            <div class="mess3">
              {{ towNumber(item.available) }}
            </div>
          </div>
        </div>
        <div class="RightBox">
          <div class="mess1">
            <div class="mess4">冻结资金</div>
            <div class="mess5" style="color:yellow">
              {{ towNumber(item.frozen_cash) }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess4">资金余额</div>
            <div class="mess5" style="color:red">
              {{ towNumber(item.balance) }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess4">姓名</div>
            <div class="mess5">{{ item.account_name }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">上海股东</div>
            <div class="mess5">{{ item.sh_holder_no }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">深圳股东</div>
            <div class="mess5">
              {{ item.sz_holder_no }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  socketsendpromote,
  socketsendpromotionlist,
  socketsendaddcontact,
  socketsendremovecontact,
  socketsendgetcontact,
  socketsendfollow,
  socketsendunfollow,
  socketsendgetfollowings,
  socketsendshare,
  socketsendaccount
} from '../assets/js/websocketTest.js'
// import NetWorth from '../views/netWorth.vue'
export default {
  // components: {
  //   NetWorth
  // },
  data() {
    return {
      data_promotionlist: this.$store.state.promotionlist,
      addcontactdata: null,
      sound: ''
    }
  },
  computed: {
    accountDatas() {
      return this.$store.state.accountdatas
    }
  },
  methods: {
    my() {
      this.$router.push('/mobliedata3')
    },
    toPromote() {
      this.$router.push('/promote')
    },
    towNumber(val) {
      return Number(val).toFixed(2)
    },
    promote() {
      socketsendpromote()
    },
    promotionlist() {
      socketsendpromotionlist()
    },
    addcontact() {
      this.$store.state.addcontact = this.addcontactdata
      socketsendaddcontact()
    },
    removecontact() {
      this.$store.state.addcontact = this.addcontactdata
      socketsendremovecontact()
    },
    getcontact() {
      socketsendgetcontact()
    },
    follow() {
      socketsendfollow()
    },
    unfollow() {
      socketsendunfollow()
    },
    getfollowings() {
      socketsendgetfollowings()
    },
    share() {
      socketsendshare()
    },
    flash1() {
      socketsendgetfollowings()
      this.$store.state.accountdatas = []
      this.$store.state.transactiondatas = []
      setTimeout(() => {
        console.log(this.$store.state.followtoken)
        for (let a = 0; a < this.$store.state.followtoken.length; a++) {
          console.log('发送成功' + this.$store.state.followtoken[a])
          socketsendaccount(this.$store.state.followtoken[a])
        }
        // socketsendshare1('0e1bc0f47a54bdf8ccbc4d50b63c2d3b')
      }, 100)
    },
    toDetails(id) {
      console.log(id)
      console.log(this.$store.state.accountdatas[id].account)
      console.log(this.$store.state.followaccount[0])
      for (let i = 0; i < this.$store.state.followaccount.length; i++) {
        if (
          this.$store.state.accountdatas[id].account ===
          this.$store.state.followaccount[i]
        ) {
          console.log(i)
          this.$store.state.Activeindex = i
          this.$store.state.INDEX = i
        }
      }
      this.$router.push({ path: '/networth' })
    }
  },
  mounted() {
    this.promotionlist()
    this.getcontact()
    this.getfollowings()
    setTimeout(() => {
      this.flash1()
    }, 300)
  }
}
</script>

<style Lang="less" scoped>
.all {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #010017;
}
.title {
  display: flex;
  flex-direction: row;
  color: #ffffff;
  width: 375px;
}
.search {
  margin-left: 78px;
}
.titlename1,
.titlename2,
.titlename3 {
  margin: 10px;
}
span {
  font-size: 16px;
}
.titleName {
  display: flex;
  flex-direction: row;
  margin-left: 100px;
}
.titleBox {
  display: flex;
}
.card {
  margin: 30px 15px 0px 15px;
  background-color: #201e33;
  color: #ffffff;
  font-family: PingFang SC;
  margin-top: 0;
  margin-bottom: 10px;
  border-radius: 10px;
  display: flex;
}
.Box {
  display: flex;
}
.LeftBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 1;
}
.RightBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 1;
}
.mess1 {
  display: flex;
  flex-direction: row;
}
.mess2 {
  letter-spacing: 2px;
  font-size: 13px;
  font-family: PingFang-SC-Regular;
  margin: 6px 0 6px 10px;
  flex: 1;
}
.mess3 {
  font-size: 10px;
  margin: 6px -10px 6px 2px;
  flex: 1;
  display: flex;
  flex-direction: row;
}
.mess4 {
  letter-spacing: 2px;
  font-size: 13px;
  margin: 6px 0 6px 10px;
  flex: 1;
}
.mess5 {
  font-size: 10px;
  margin: 6px -10px 6px 2px;
  flex: 1;
  display: flex;
  flex-direction: row;
}
</style>
